<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="./vue.js"></script>
    </head>
    <style>

    </style>
    <body>
        <div id="app">
            <!-- <input type="text" v-model="msg"> -->

            <!-- 据双向绑定原理 -->

            <!-- <input type="text" :value="msg" @input="changeValue"> -->

            <input type="text" :value="msg" @input="msg = $event.target.value">
            <h2>{{msg}}</h2>

            <hr>

            <!-- v-modle结合radio类型 -->
            <label for="man">
                <input type="radio" name="sex" id="man" value="男" v-model="sex">男
            </label>
            <label for="woman">
                <input type="radio" name="sex" id="woman" value="女" v-model="sex">女
            </label>
            <h2>您选择的性别是:{{sex}}</h2>

            <hr>

            <!-- v-modle结合checkbox类型   checkbox单选框-->
            <label for="agree">
                <input type="checkbox" name="agree" id="agree" v-model='isAgree'>同意协议
            </label>
            <h2>你的选择是:{{isAgree}}</h2>
            <button :disabled="!isAgree">下一步</button>

            <hr>

            <!-- checkbox 多选框 -->
            <input type="checkbox" name="" id="" value="篮球" v-model="hobbies">篮球
            <input type="checkbox" name="" id="" value="足球" v-model="hobbies">足球
            <input type="checkbox" name="" id="" value="羽毛球" v-model="hobbies">羽毛球
            <input type="checkbox" name="" id="" value="乒乓球" v-model="hobbies">乒乓球
            <h2>你的爱好有:{{hobbies}}</h2>

            <!-- 值绑定 -->
            <label v-for="(item,index) in hobby">
                <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
            </label>
            <hr>

            <!-- select 选择一个-->
            <select name="" id="" v-model="isName">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
            </select>
            <h2>你选择的是:{{isName}}</h2>

            <hr>

            <!-- select 选择多个-->
            <select name="" id="" v-model="isNames" multiple>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
            </select>
            <h2>你选择的是:{{isNames}}</h2>
        </div>
    </body>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                msg:"你好啊",
                sex:"男",//默认选择
                isAgree:false,// 单选框    布尔类型
                hobbies:[], // 多选框
                hobby:["台球",'冰壶','排球','篮球','足球'],
                isName:"opel", //默认选择  字符串类型
                isNames:[]
            },
            methods: {
                changeValue(event){
                   // console.log(event);
                   this.msg = event.target.value;
                }
            }
        })
    </script>
</html>